import React, { Fragment } from 'react';
import { Modal, Button, Form, Input, Select, message, InputNumber, Row, Col, Checkbox, Radio } from 'antd';
import { connect } from 'dva';
import styles from './index.less';
const FormItem = Form.Item;
const Option = Select.Option;

export default class TagRule extends React.Component {
    obj = {
        RecentBuyDays: null,
        AccumulatedDeal: null,
        AccumulatedDealMax: null,
        AccumulatedAmount: null,
        AccumulatedAmountMax: null,
        AverageAmountMin: null,
        AverageAmountMax: null,
        istime: false,
        iscount: false,
        isprice: false,
        isorderprice: false,
    }
    componentWillMount() {
      window.Isoption = false;
    }
    componentDidMount() {
      window.Isoption = true;
        this.obj.RecentBuyDays = this.props.value && this.props.value.RecentBuyDays;
        this.obj.AccumulatedDeal = this.props.value && this.props.value.AccumulatedDeal;
        this.obj.AccumulatedDealMax = this.props.value && this.props.value.AccumulatedDealMax;
        this.obj.AccumulatedAmount = this.props.value && this.props.value.AccumulatedAmount;
        this.obj.AccumulatedAmountMax = this.props.value && this.props.value.AccumulatedAmountMax;
        this.obj.AverageAmountMin = this.props.value && this.props.value.AverageAmountMin;
        this.obj.AverageAmountMax = this.props.value && this.props.value.AverageAmountMax;

    }

    static getDerivedStateFromProps(nextProps) {
        if ('value' in nextProps) {
            return {
                ...(nextProps),
            };
        }
        return null;
    }
    onChange = (name, e) => {
        const { onChange, form } = this.props;
        this.obj[name] = e;
        form.setFieldsValue({
            TagRule: this.obj,
        });
    }
    render() {
        const formItemLayout = {
            labelCol: {
                xs: { span: 2 },
                sm: { span: 2 },
                md: { span: 2 },

            },
            wrapperCol: {
                xs: { span: 6 },
                sm: { span: 6 },
                md: { span: 8 },
            },
        };

        const {
            getFieldDecorator, getFieldsError, getFieldError, isFieldTouched, getFieldValue
        } = this.props.form;
        return (
            <div class="Rule">
                <Row>
                    <Col span={4}>
                        交易条件：
                    </Col>
                    <Col span={15}>
                        <Form.Item>
                            <Radio.Group
                                onChange={(e) => this.onChange('Logic2And', e.target.value)}
                                defaultValue={this.props.value && this.props.value.Logic2And ? 2 : 1}

                            >
                                <Radio value={1}>满足任意一个被选中的条件</Radio>
                                <Radio value={2}>满足所有被选中的条件</Radio>
                            </Radio.Group>

                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={1} offset={4}>
                        <FormItem>
                            <Checkbox
                                onChange={(e) => this.onChange('istime', e.target.checked)}
                                defaultChecked={this.props.value && this.props.value.RecentBuyDays ? true: false}
                        />
                        </FormItem>
                    </Col>
                    <Col span={3}>最近消费时间：</Col>
                    <Col span={8}>
                        <FormItem>
                            <Select
                                onChange={(e) => this.onChange('RecentBuyDays', e)}
                                disabled={this.obj.istime ? false : true}
                                defaultValue={this.props.value && this.props.value.RecentBuyDays}>
                                <Option value={0}> 今天</Option>
                                <Option value={7}> 最近7天</Option>
                                <Option value={15}> 最近15天</Option>
                                <Option value={30}> 最近30天</Option>
                                <Option value={45}> 最近45天</Option>
                                <Option value={60}> 最近60天</Option>
                                <Option value={90}> 最近90天</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={1} offset={4}>
                        <FormItem>
                            <Checkbox
                                onChange={(e) => this.onChange('iscount', e.target.checked)}
                                defaultChecked={this.props.value && this.props.value.AccumulatedDeal ? true: false}
                            />
                        </FormItem>
                    </Col>
                    <Col span={3}>累积消费次数：</Col>
                    <Col span={5}>
                        <FormItem>
                            <Input
                                onChange={(e) => this.onChange('AccumulatedDeal', e.target.value)}
                                addonAfter="次"
                                disabled={this.obj.iscount ? false : true}
                                defaultValue={this.props.value && this.props.value.AccumulatedDeal}

                            />
                        </FormItem>
                    </Col>
                    <Col span={1}>~</Col>
                    <Col span={6}>
                        <FormItem>
                            <Input
                                onChange={(e) => this.onChange('AccumulatedDealMax', e.target.value)}
                                addonAfter="次"
                                disabled={this.obj.iscount ? false : true}
                                defaultValue={this.props.value && this.props.value.AccumulatedDealMax}
                            />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={1} offset={4}>
                        <FormItem>
                            <Checkbox
                                onChange={(e) => this.onChange('isprice', e.target.checked)}
                                defaultChecked={this.props.value && this.props.value.AccumulatedAmount ? true: false}
                            />
                        </FormItem>

                    </Col>
                    <Col span={3}>
                    累积消费金额：
                    </Col>
                    <Col span={5}>
                        <FormItem>
                            <Input
                                onChange={(e) => this.onChange('AccumulatedAmount', e.target.value)}
                                addonAfter="元"
                                disabled={this.obj.isprice ? false : true}
                                defaultValue={this.props.value && this.props.value.AccumulatedAmount}
                            />
                        </FormItem>
                    </Col>
                    <Col span={1}>~</Col>
                    <Col span={6}>
                        <FormItem>
                            <Input
                                onChange={(e) => this.onChange('AccumulatedAmountMax', e.target.value)}
                                addonAfter="元"
                                disabled={this.obj.isprice ? false : true}
                                defaultValue={this.props.value && this.props.value.AccumulatedAmountMax}
                            />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={1} offset={4}>
                        <FormItem >
                            <Checkbox
                                onChange={(e) => this.onChange('isorderprice', e.target.checked)}
                                defaultChecked={this.props.value && this.props.value.AverageAmountMin ? true: false}
                            />
                        </FormItem>

                    </Col>
                    <Col span={3}>客单价：</Col>
                    <Col span={5}>
                        <FormItem>
                            <Input
                                onChange={(e) => this.onChange('AverageAmountMin', e.target.value)}
                                addonAfter="元"
                                disabled={this.obj.isorderprice ? false : true}
                                defaultValue={this.props.value && this.props.value.AverageAmountMin}
                            />
                        </FormItem>
                    </Col>
                    <Col span={1}>~</Col>
                    <Col span={6}>
                        <FormItem
                        >
                            <Input
                                onChange={(e) => this.onChange('AverageAmountMax', e.target.value)}
                                addonAfter="元"
                                disabled={this.obj.isorderprice ? false : true}
                                defaultValue={this.props.value && this.props.value.AverageAmountMax}
                            />
                        </FormItem>
                    </Col>
                </Row>
            </div>
        )
    }
}
